// 轮播图
let imglist = document.querySelector(".imglist")
let biao = document.querySelectorAll(".biao")
let allbiao = document.querySelector(".xiabiao")
let lbt = document.querySelector(".lbt")
let num = 0
let tim = null

function xiabiao(index) {
    for (let i = 0; i < biao.length; i++) {
        biao[i].classList.remove("biaochange")
    }
    if (index >= 3) {
        num = 0
        biao[num].classList.add("biaochange")
    } else {
        biao[index].classList.add("biaochange")
    }
}

function tupian(index) {
    imglist.style.marginLeft = -1200 * index + 'px'
    imglist.style.transition = " all 0.2s linear";
    imglist.ontransitionend = function() {
        if (index >= 3) {
            console.log("判断成功")
            imglist.style.marginLeft = '0px'
            imglist.style.transition = "none";
        }
    };
}

function autoplay() {
    if (tim === null) {
        tim = setInterval(() => {
            num++
            num = num % 4
                // console.log(num)
            tupian(num)
            xiabiao(num)
        }, 3000)
    }
}

function stopplay() {
    clearInterval(tim)
    tim = null
}
autoplay()
lbt.addEventListener("mouseover", () => {
    stopplay()
})
lbt.addEventListener("mouseleave", () => {
    autoplay()
})
allbiao.onclick = (e) => {
    let number = 0
    for (let i = 0; i < biao.length; i++) {
        if (biao[i] === e.target) {
            number = i
        }
    }
    xiabiao(number)
    tupian(number)
    num = number
}
window.onblur = () => {
    stopplay()
}
window.onfocus = () => {
    autoplay()
}

// 点击切换输入框
let chakuang = document.querySelectorAll(".cha>li")
let jia = document.querySelectorAll(".jia")
let input = document.querySelector(".kuang>input")
let tishi = ["请输入企业名称、品牌名称、核心人员姓名等关键词。如“百度”", "请输入法定代表人、股东、企业高管姓名。如“李彦宏”", "请输入想查询的内容"]
chakuang.forEach((el, index) => {
    el.onclick = () => {
        chakuang.forEach((e, ind) => {
            e.classList.remove("chachange")
        })
        jia.forEach((e, sin) => {
            e.style.display = "none"
        })
        el.classList.add("chachange")
        jia[index].style.display = "block"
        input.placeholder = tishi[index]
        input.value = ''
    }
})

// 动态渲染新闻部分
let newul = document.querySelector(".newyou")

function neww(arr) {
    let str = ''
    arr.forEach((el, index) => {
        if (index >= arr.length - 1) {
            newul.innerHTML = str

        } else {
            str += `<li>
                    <div class="lefttime">
                        <div class="shangtime">${el.time.slice(-2)}</div>
                        <div class="xiatime">${el.time.slice(0,-3)}</div>
                    </div>
                    <div class="rightall">
                    <a href=""><div class="righttitle">${el.title}</div></a>
                        <div class="rightdownfont">
                            <div class="downwho">${el.from}</div>
                            <div class="downsee">${el.read}</div>
                            <div class="downqi">${el.about}</div>
                        </div>
                    </div>
                </li>`
        }
    })

}
neww(datanews)
let zuiul = document.querySelector(".zuixin>ul")

function zuixin(arr) {
    let str = ''
    for (let i = 0; i < arr.length; i++) {
        if (i < arr.length - 1) {
            str += `<li>
                <div class="dlsvg">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href=${arr[i].icon}></use>
                    </svg>
                </div>
                <div class="youshang">${arr[i].zhuangtai}</div>
                <div class="dlfont">${arr[i].title}</div>
                <p>${arr[i].text1}</p>
                <p>${arr[i].text2}</p>
                <p>${arr[i].text3}</p>
                <div class="dlmoney">
                    <span>￥</span> <span>${arr[i].money}</span> 元
                </div>
            </li>`
        } else {
            str += `<li>
                <div class="dlsvg">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href=${arr[i].icon}></use>
                    </svg>
                </div>
                <div class="dlfont">${arr[i].title}</div>
                <p>${arr[i].text1}</p>
                <p>${arr[i].text2}</p>
                <p>${arr[i].text3}</p>
                <div class="dlmoney">
                年化利率<span></span> <span>${arr[i].money}</span> 起
                </div>
            </li>`
        }
    }
    zuiul.innerHTML = str
}
zuixin(databumen)

// 动态渲染认领模块
let rlul = document.querySelector(".renlin>ul")

function rlxr(arr) {
    let str = ''
    for (let i = 0; i < arr.length; i++) {
        str += ` <li>
                    <a href="">
                        <div class="rlleft">${arr[i].left}</div>
                        <div class="rlright">
                            <div class="rltitle">${arr[i].gongsi}</div>
                            <p>${arr[i].ren}</p>
                            <p>${arr[i].money}</p>
                            <p>${arr[i].time}</p>
                        </div>
                    </a>
                </li>`
    }
    rlul.innerHTML = str
}
rlxr(datagongsi)

// 渲染下面的地区数据
function getData(url) {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest()
        xhr.open("get", `${url}?token=jyW9PywK3cws3rgS`)
        xhr.send()
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status == 200) {
                    let res = JSON.parse(xhr.responseText)
                    resolve(res)
                } else {
                    reject("错误")
                }
            }
        }
    })
}
let xbul = document.querySelector(".xbdown")

// 第一块部分的渲染
function xr(res) {
    let data = res.data
    let str7 = '<ul class="dq">'
    for (let i = 0; i < data.length; i++) {
        str7 += `
            <li class="shen">
            
                <div class="xbleft">${data[i].province}</div>
                <ul class='xbright'>
            `
        let citi = data[i].cities
        for (let j = 0; j < citi.length; j++) {
            str7 += `
                    <li class="one">
                        <a href="">${citi[j].city}</a>
                    </li>
            `
        }
        str7 += `
                </ul>
            </li>
            `
    }
    str7 += '</ul>'
    xbul.innerHTML = str7
}
// 第二块部分的渲染
function xr2() {
    let str5 = '<ul class="qy">'
    for (let i = 0; i < xbdata.length; i++) {
        str5 += `
        <li class="dange">
            <a href="">
                <div class="dg1">${xbdata[i].gs}</div>
                <p>${xbdata[i].ren}</p>
                <p>${xbdata[i].qian}</p>
            </a>
        </li>
        `
    }
    str5 += `</ul>`
    xbul.innerHTML = str5
}
// 第三块部分的渲染
function xr3(res) {
    let data = res.data.hot
    let str8 = '<ul class="rm">'
    for (let i = 0; i < data.length; i++) {
        str8 += `
            <li class="rw">
                <a href=${data[i].link}>
                    ${data[i].title}
                </a>
            </li>
        `
    }
    str8 += '</ul>'
    xbul.innerHTML = str8
    console.log(str8)
}
// 第四块部分的渲染
function xr4() {
    str4 = `
    <div class="lan">更多功能等待开发中~</div>
    `
    xbul.innerHTML = str4
}
// 点击切换
let xbtop = document.querySelector(".xbtop")
let xbli = document.querySelectorAll(".xbtop>li")

// 初始化
// first()

function first() {
    getData('https://v2.alapi.cn/api/springTravel/city').then(
        res => {
            console.log(res)
            xr(res)
        },
        err => {
            console.log(err)
        }
    )
}
// 点击
xbtop.onclick = function(e) {
    let index = 0
    if (e.target.nodeName === "LI") {
        for (let j = 0; j < xbli.length; j++) {
            if (xbli[j] === e.target) {
                index = j
            }
            xbli[j].classList.remove("tabchange")
        }
        e.target.classList.add("tabchange")
        if (index === 0) {
            first()
        } else if (index === 1) {
            xr2()
        } else if (index === 2) {
            getData('https://v2.alapi.cn/api/tophub/wiki').then(
                res => {
                    console.log(res)
                    xr3(res)
                },
                err => {
                    console.log(err)
                }
            )
        } else {
            xr4()
        }
    }
}

let bigleft = document.querySelector(".bigleft")
let bigsmall = document.querySelector(".bigsmall")
bigsmall.onclick = () => {
    bigsmall.style.transform = 'translateX(-100%)'
}